<script setup lang="ts">
import { ref, computed } from "vue";

const props = withDefaults(
  defineProps<{
    title: string;
    desc: string;
    height?: string;
    cancelText?: string;
    confirmText?: string;
  }>(),
  {
    title: "标题",
    desc: "内容",
    cancelText: "取消",
    confirmText: "确定"
  }
);
const emit = defineEmits(["cancel", "confirm"]);
const popup = ref();
defineExpose({
  show: () => {
    popup.value.open();
  },
  hide: () => {
    popup.value.close();
  }
});

const showCancelButton = computed(() => {
  return props.cancelText !== "none" && props.cancelText.trim() !== "";
});
const showConfrimButton = computed(() => {
  return props.confirmText !== "none" && props.confirmText.trim() !== "";
});
</script>

<template>
  <uv-popup ref="popup" mode="center" zIndex="999" bgColor="none">
    <view class="chance" :style="{ height }">
      <view class="title">{{ title }}</view>
      <view class="desc"> {{ desc }} </view>
      <Flex class="action" justify="space-around">
        <t-button
          class="cancel-button"
          v-if="showCancelButton"
          width="130px"
          backgroundColor="#F2F4FF"
          labelColor="#4059FD"
          @click="emit('cancel')"
          >{{ cancelText }}</t-button
        >
        <t-button
          v-if="showConfrimButton"
          backgroundColor="#333333"
          width="130px"
          @click="emit('confirm')"
          >{{ confirmText }}</t-button
        >
      </Flex>
    </view>
  </uv-popup>
</template>

<style lang="scss" scoped>
.chance {
  text-align: center;
  background: var(--bg-popup);

  width: 327px;
  height: 322px;
  box-sizing: border-box;
  padding: 0 8px 0;
  border-radius: 15px;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  text-align: center;
  .title {
    color: var(--color-text-default);
    font-size: 20px;
    font-weight: 400;
    width: 100%;
    margin-bottom: 16px;
    .light {
      color: #4048fd;
    }
  }
  .desc {
    color: var(--color-text-assist-1);
    font-size: 16px;
    margin-bottom: 24px;
    letter-spacing: 4px;
    line-height: 30px;
  }
  .action {
    width: 100%;
  }
}
</style>
